<div>
<ul data-role="listview" data-inset="true" id="lvController">
	<li data-role="list-divider">
		<div data-role="controlgroup" data-type="horizontal"
			style="float: left;">
			<h3 id="taskName">Task: <%=id%></h3>
		</div>
		<div data-role="controlgroup" data-type="horizontal"
			data-mini="true" style="float: right;">
			<a href="#" id="editTask"
				class="ui-btn ui-corner-all ui-icon-edit ui-btn-icon-notext">Icon
				only</a> <a href="#" id="deleteTask"
				class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext">Icon
				only</a>
		</div>
	</li>
	<li style="padding-top: 0; padding-bottom: 0;">
		<div data-role="fieldcontain" data-type="horizontal">
			<label for="textinput-id">ID:</label> <input type="text"
				name="textinput-id" id="textinput-id" placeholder="ID" value="<%=id%>"
				readonly>
		</div>
	</li>
	<li style="padding-top: 0; padding-bottom: 0;">
		<div data-role="fieldcontain" data-type="horizontal">
			<label for="textinput-type">Type:</label> <input type="text"
				name="textinput-type" id="textinput-type" placeholder="type"
				value="<%=type%>" readonly>
		</div>
	</li>
	<li style="padding-top: 0; padding-bottom: 0;">
		<div data-role="fieldcontain" data-type="horizontal">
			<label for="textinput-name">Name:</label> <input type="text"
				name="textinput-name" id="textinput-name" placeholder="No name"
				value="<%=name%>" readonly>
		</div>
	</li>
	<li style="padding-top: 0; padding-bottom: 0;">
		<div data-role="fieldcontain" data-type="horizontal">
			<label for="textinput-batchtype">Batch type:</label> <input type="text"
				name="textinput-batchtype" id="textinput-batchtype" placeholder="Batch type"
				value="<%=batch%>" readonly>
		</div>
	</li>	
	<li style="padding-top: 0; padding-bottom: 0;">
		<div data-role="fieldcontain" data-type="horizontal">
			<label for="textinput-duration">Duration:</label> <input type="text"
				name="textinput-duration" id="textinput-duration" placeholder="Duration"
				value="<%=duration%>" readonly>
		</div>
	</li>	
	<li style="padding-top: 0; padding-bottom: 0;">
		<div data-role="fieldcontain" data-type="horizontal">
			<label for="textinput-description">Description:</label> <input
				type="text" name="textinput-description"
				id="textinput-description" placeholder="Description" value="<%=description%>"
				readonly>
		</div>
	</li>
	<li style="padding-top: 0; padding-bottom: 0;">
		<div data-role="fieldcontain" data-type="horizontal">
			<label for="textinput-gwId">Gateway:</label> <input type="text"
				name="textinput-gwId" id="textinput-gwId" placeholder="Gateway"
				value="<%=gwId%>" readonly>
		</div>
	</li>
	<li style="padding-top: 0; padding-bottom: 0;">
		<div data-role="fieldcontain" data-type="horizontal">
			<label for="textinput-account">Account:</label> <input type="text"
				name="textinput-account" id="textinput-account" placeholder="Account"
				value="<%=account%>" readonly>
		</div>
	</li>	
</ul>

<br />
<ul data-role="listview" data-inset="true" id="lvPumpGroups">
	<li data-role="list-divider">
		<div data-role="controlgroup" data-type="horizontal"
			style="float: left;">
			<h3 id="navPumpGroupsHeader">Pump Groups:</h3>
		</div>
		<div data-role="controlgroup" data-type="horizontal"
			data-mini="true" style="float: right;">
			<a href="#" id="selectAllPumpGroup" class="ui-btn ui-corner-all">Select all group</a>
			<a href="#" id="deSelectAllPumpGroup" class="ui-btn ui-corner-all">DeSelect all group</a>
			<a href="#" id="deletePumpGroups" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext">Icon only</a>
			<a id="addPumpGroup"
				class="ui-btn ui-corner-all ui-icon-plus ui-btn-icon-notext">Icon only</a>
		</div>
	</li>

	<%pumpGroups.forEach(function(p){%>	
	<li id="<%=p%>">
	<label><input name="checkbox-0 " type="checkbox"><%=p%></label>
	</li>
	<%});%>
</ul>
<ul data-role="listview" data-inset="true" id="lvValveGroups">
	<li data-role="list-divider">
		<div data-role="controlgroup" data-type="horizontal"
			style="float: left;">
			<h3 id="navValveGroupsHeader">Valve Groups:</h3>
		</div>
		<div data-role="controlgroup" data-type="horizontal"
			data-mini="true" style="float: right;">
			<a href="#" id="selectAllValveGroup" class="ui-btn ui-corner-all">Select all group</a>
			<a href="#" id="deSelectAllValveGroup" class="ui-btn ui-corner-all">DeSelect all group</a>
			<a href="#" id="deleteValveGroups" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext">Icon only</a>
			<a id="addValveGroup"
				class="ui-btn ui-corner-all ui-icon-plus ui-btn-icon-notext">Icon only</a>
		</div>
	</li>
	<%valveGroups.forEach(function(v){%>
	<li id="<%=v%>">
	<label><input name="checkbox-0 " type="checkbox" id="checkbox"><%=v%></label>
	</li>
	<%});%>
</ul>
<script type="text/javascript" src="owjs/wTaskMgrWateringT.js"></script>
</div>